// HOC
// 1 HOC 本身是一个函数 一般 with+其他
// 2 接收参数  组件
// 3 返回结果  新组件

function withColorLog(Com) {
  const log = (msg) => {
    console.log(
      "%c" + msg,
      "color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)"
    );
  };
  // 定义一个组件
  const NewCom = () => <Com a={1} b={2} log={log} />;
  return NewCom;
}

const Btn = (props) => {
  return (
    <div>
      <button onClick={() => props.log("你好")}>子组件</button>
    </div>
  );
};
// 新组件 MyNewCom
const MyNewCom = withColorLog(Btn);

export default function App() {
  return (
    <div>
      <h1>App</h1>
      <button>打印输出</button>
      <MyNewCom></MyNewCom>
    </div>
  );
}
